<!DOCTYPE html>
<!--han games-->
<html>
<head>
<title>划拳裁判长</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="css/ex.css" rel = "stylesheet" type="text/css">
</head>
<style>
#icon_1{position: absolute;top: 1px;left: 1%;z-index: 995;}
#icon_2{position: absolute;bottom: 1px;left: 1%;z-index: 996;}
#sucImg,#failImg{position: absolute;top: 30%;left: 44%;z-index: 999;display: none;}
@media (min-width: 1370px ) and (max-width: 1910px){
#sucImg,#failImg{position: absolute;top: 28%;left: 42%;}
}
@media (min-width: 1020px) and (max-width: 1366px) {
    #sucImg,#failImg{position: absolute;top: 28%;left: 41%;}
}

@media (min-width: 767px) and (max-width: 991px) {
     #sucImg,#failImg{position: absolute;top: 10%;left: 37%;}
}
@media (max-width: 414px ){
        #sucImg,#failImg{position: absolute;top: 10%;left: 15%;}
}
</style>
<body>
<div id="loading"><span></span></div>

 <div id="instructions" style="display: none;">
       <div class="select" >
            <div class="content">
                <div class="indent">
                    <!-- 请小朋友们用最快的速度判断,左边赢、右边赢、平局～找对有惊喜！ -->
                </div>
                 <div class="start"></div>
            </div>
        </div>
    </div>
    <div id="sucImg"><img src="image/success.png" style="width:300px;height: 300px;"></div>
    <div id="failImg"><img src="image/fail.png" style="width:300px;height: 300px;"></div>
    <div id="icon_1"><img src="image/help2.png"></div>
    <div id="icon_2"> <a href="index.html"><img src="image/reset1.png"></a></div>
<center>
    <canvas id="gameView" width="1280" height="720"></canvas>
</center>
   <canvas id="bg-canvas" width="1024" height="768" style="margin:auto; position: absolute; z-index:-10;width: 100vw;height:100vh;top:0px;left:0px;"></canvas>
   <!--<audio src="music/s2.mp3" loop="loop" autoplay="autoplay"></audio>-->
</body>
<script src="js/jquery.min.js"></script>
<script src="js/create.js"></script>
<script src="js/common.js"></script>
<script src="js/stbg.js"></script>
<script src="js/gameDataSheets.js"></script><!--第一关-->

<script>
//你真棒
window.handleResize = function () {
    if (window.innerWidth < window.innerHeight * 1024 / 768) {
        $("#gameView").css({
            "height": "auto",
            "width": "99vw"
        });
    } else {
        $("#gameView").css({
            "height": "99vh",
            "width": "auto"
        });
    };
};
window.addEventListener('resize', handleResize, false);
window.handleResize();

$(document).ready(function(){
    window.init();
})
$("#icon_1").click(function(){
    $("#gameView").hide();
    $("#instructions").show();
    $("#icon_1").hide();
    $("#icon_2").hide();
  })
  $(".start").click(function(){
      $("#instructions").hide();
     $("#gameView").show();
    $("#icon_1").show();
    $("#icon_2").show();
  })
</script>
</html>